﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>发布-商家中心</title>
    <meta name="keywords" content="DeathGhost"/>
    <meta name="description" content="DeathGhost"/>
    <meta name="author" content="DeathGhost,deathghost@deathghost.cn">
    <link rel="icon" href="../images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script src="../js/html5.js"></script>
    <script src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.cookie.js"></script>
    <script src="../js/vue.min.js"></script>
    <script>
        $(document).ready(function () {
            $("nav .indexAsideNav").hide();
            $("nav .category").mouseover(function () {
                $(".asideNav").slideDown();
            });
            $("nav .asideNav").mouseleave(function () {
                $(".asideNav").slideUp();
            });
        });
    </script>
</head>
<body>
<!--header-->
<header>
    <!--topNavBg-->
    <div class="topNavBg">
        <div class="wrap">
            <!--topLeftNav-->
            <ul class="topLtNav">
                <li><a href="login.html" class="obviousText">亲，请登录</a></li>
                <li><a href="register.html">注册</a></li>
                <li><a href="#">移动端</a></li>
            </ul>
            <!--topRightNav-->
            <ul class="topRtNav">
                <li><a href="user.html">个人中心</a></li>
                <li><a href="cart.html" class="cartIcon">购物车<i>0</i></a></li>
                <li><a href="favorite.html" class="favorIcon">收藏夹</a></li>
                <li><a href="user.html">商家中心</a></li>
                <li><a href="article_read.html" class="srvIcon">客户服务</a></li>
                <li><a href="union_login.html">联盟管理</a></li>
            </ul>
        </div>
    </div>
    <!--logoArea-->
    <div class="wrap logoSearch">
        <!--logo-->
        <div class="logo">
            <h1><img src="../images/logo.png"/></h1>
        </div>
        <!--search-->
        <div class="search">
            <ul class="switchNav">
                <li class="active" id="chanpin">产品</li>
                <li id="shangjia">商家</li>
                <li id="zixun">搭配</li>
                <li id="wenku">文库</li>
            </ul>
            <div class="searchBox">
                <form>
                    <div class="inputWrap">
                        <input type="text" placeholder="输入产品关键词或货号"/>
                    </div>
                    <div class="btnWrap">
                        <input type="submit" value="搜索"/>
                    </div>
                </form>
                <a href="#" class="advancedSearch">高级搜索</a>
            </div>
        </div>
    </div>
    <!--nav-->
    <nav>
        <ul class="wrap navList">
            <li class="category">
                <a>全部产品分类</a>
                <dl class="asideNav indexAsideNav">
                    <dt><a href="channel.html">女装</a></dt>
                    <dd>
                        <a href="#">夏装新</a>
                        <a href="#">连衣裙</a>
                        <a href="#">T恤</a>
                        <a href="#">衬衫</a>
                        <a href="#">裤子</a>
                        <a href="#">牛仔裤</a>
                        <a href="#">背带裤</a>
                        <a href="#">短外套</a>
                        <a href="#">时尚外套</a>
                        <a href="#">风衣</a>
                        <a href="#">毛衣</a>
                        <a href="#">背心</a>
                        <a href="#">吊带</a>
                        <a href="#">民族服装</a>
                    </dd>
                    <dt><a href="channel.html">男装</a></dt>
                    <dd>
                        <a href="#">衬衫</a>
                        <a href="#">背心</a>
                        <a href="#">西装</a>
                        <a href="#">POLO衫</a>
                        <a href="#">马夹</a>
                        <a href="#">皮衣</a>
                        <a href="#">毛衣</a>
                        <a href="#">针织衫</a>
                        <a href="#">牛仔裤</a>
                        <a href="#">外套</a>
                        <a href="#">夹克</a>
                        <a href="#">卫衣</a>
                        <a href="#">风衣</a>
                        <a href="#">民族风</a>
                        <a href="#">原创设计</a>
                        <a href="#">大码</a>
                        <a href="#">情侣装</a>
                        <a href="#">开衫</a>
                        <a href="#">运动裤</a>
                        <a href="#">工装裤</a>
                    </dd>
                </dl>
            </li>
            <li>
                <a href="homepage.html" class="active">首页</a>
            </li>
            <li>
                <a href="#">时尚搭配</a>
            </li>
            <li>
                <a href="channel.html">原创设计</a>
            </li>
            <li>
                <a href="channel.html">时尚代购</a>
            </li>
            <li>
                <a href="channel.html">民族风</a>
            </li>
            <li>
                <a href="information.html">时尚搭配</a>
            </li>
            <li>
                <a href="library.html">搭配知识</a>
            </li>
            <li>
                <a href="#">促销专区</a>
            </li>
            <li>
                <a href="#">其他</a>
            </li>
        </ul>
    </nav>

</header>
<script>
    $(document).ready(function () {
        //测试效果，程序对接如需变动重新编辑
        $(".switchNav li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
        });
        $("#chanpin").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入产品关键词或货号");
        });
        $("#shangjia").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入商家店铺名");
        });
        $("#zixun").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入关键词查找文章内容");
        });
        $("#wenku").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入关键词查找文库内容");
        });
    });

</script>
<div id="addProductApp">
<section class="wrap user_center_wrap">
    <!--左侧导航-->
    <aside class="user_aside_nav">
        <dl>
            <dt>买家中心</dt>
            <dd><a href="order_list.html">我的订单</a></dd>
            <dd><a href="price_list.html">我的询价单</a></dd>
            <dd><a href="favorite.html">我的收藏</a></dd>
            <dd><a href="address.html">我的地址</a></dd>
            <dd v-if="user.role===0"><a href="authenticate.html">我要开店</a></dd>
        </dl>
        <dl v-if="user.role===1">
            <dt>商家管理中心</dt>
            <dd><a href="setting.html">店铺设置</a></dd>
            <dd><a href="seller_product_list.html">商品列表</a></dd>
            <dd><a href="seller_order_list.html">订单列表</a></dd>
            <dd><a href="offer_list.html">询价单</a></dd>
        </dl>
        <dl>
            <dt>控制面板</dt>
            <dd><a href="message.html">站内短消息</a></dd>
            <dd><a href="account.html">资金管理</a></dd>
            <dd><a href="profile.html">个人资料</a></dd>
            <dd><a href="change_password.html">修改密码</a></dd>
        </dl>
    </aside>
    <!--右侧：内容区域-->
    <div class="user_rt_cont">
        <div class="top_title">
            <strong>发布/编辑/更新商品</strong>
        </div>
        <table class="order_table">
            <tr>
                <td width="90" align="right">商品分类：</td>
                <td>
                    <select v-model="levelOneId" class="select" v-on:change="initLevelTwo">
                        <option value="-1">请选择一级分类</option>
                        <option v-for="item in levelOne" :value="item.id">{{item.name}}</option>
                    </select>
                    <select v-model="levelTwoId" class="select" v-on:change="initLevelThree">
                        <option value="-1">请选择二级分类</option>
                        <option v-for="item in levelTwo" :value="item.id">{{item.name}}</option>
                    </select>
                    <select v-model="levelThreeId" class="select">
                        <option value="-1">请选择三级分类</option>
                        <option v-for=" item in levelThree" :value="item.id">{{item.name}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td width="80" align="right">商品名称：</td>
                <td>
                    <input v-model="name" type="text" class="textbox textbox_295" placeholder="输入产品名称"/>
                </td>
            </tr>
            <tr>
                <td width="80" align="right">市场售价：</td>
                <td>
                    <input v-model="price" type="text" style="width: 80px" class="textbox" placeholder="0.00"/>
                </td>
            </tr>
            <tr>
                <td width="80" align="right">商品主图：</td>
                <td>
                    <img :src="mainPicture" style="width: 80px;height: 80px" onclick="$('#mainFile').click()">
                    <input id="mainFile" type="file" style="display:none;" @change="uploadMain"/>
                    <br>
                </td>
            </tr>
            <tr>
                <td width="80" align="right">添加图片：</td>
                <td>
                    <img :src="vicePicture" style="width: 80px;height: 80px" onclick="$('#viceFile').click()">
                    <input id="viceFile" type="file" style="display:none;" @change="uploadVice"/>
                    <button class="group_btn" @click="addPreImage">添加</button>
                </td>
            </tr>
            <tr>
                <td width="80" align="right">相册图：</td>
                <td>
                    <a v-for="item in pictures" title="双击删除"><img :src="item" style="width: 60px;height: 60px"
                            @dblclick="deletePreImage(item)"></a>
                </td>
            </tr>

            <tr>
                <td width="80" align="right">运费：</td>
                <td>
                    <input v-model="sendPrice" style="width: 80px" type="text" class="textbox textbox_225"
                           placeholder="0.00"/>
                </td>
            </tr>
            <tr>
                <td width="80" align="right">商品描述：</td>
                <td>
                    <textarea v-model="description" class="textarea" style="width:500px;height:100px;"></textarea>
                </td>
            </tr>
            <tr>
                <td width="80" align="right">商品参数：</td>
                <td>
                    <input v-model="specification" type="text" placeholder="规格" class="textbox textbox_225"
                           style="width: 70px"/>
                    <input v-model="color" type="text" placeholder="颜色" class="textbox textbox_225"
                           style="width: 70px"/>
                    <input v-model="stock" type="text" placeholder="库存" class="textbox textbox_225"
                           style="width: 70px"/>
                    <button class="group_btn" @click="addParam">添加</button>
                    <label>总库存 {{allStock}}</label>
                </td>
            </tr>
            <tr>
                <td width="80" align="right"></td>
                <td>
                    <div class="col-lg-6">
                        <table class="table">
                            <tr>
                                <th style='text-align: center;'>规格</th>
                                <th style='text-align: center;'>颜色</th>
                                <th style='text-align: center;'>库存</th>
                            </tr>
                            <tr v-for="item in params">
                                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                                    {{item.specification}}
                                </td>
                                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                                    {{item.color}}
                                </td>
                                <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                                    {{item.stock}}
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td width="80" align="right"></td>
                <td>
                    <input type="button" value="更新保存" class="group_btn" @click="addGoods"/>
                </td>
            </tr>
        </table>
    </div>
</section>
</div>
<!--footer-->
<footer>
    <!--help-->
    <ul class="wrap help">
        <li>
            <dl>
                <dt>消费者保障</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>新手上路</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>付款方式</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>服务保障</dt>
                <dd><a href="article_read.html">保障范围</a></dd>
                <dd><a href="article_read.html">退换货流程</a></dd>
                <dd><a href="article_read.html">服务中心</a></dd>
                <dd><a href="article_read.html">更多服务特色</a></dd>
            </dl>
        </li>
    </ul>
    <dl class="wrap otherLink">
        <dt>友情链接</dt>
        <dd><a href="#" target="_blank">素材网站</a></dd>
        <dd><a href="#/pins/24448.html">HTML5模块化后台管理模板</a></dd>
        <dd><a href="#/pins/15966.html">绿色清爽后台管理系统模板</a></dd>
        <dd><a href="#/pins/14931.html">黑色的cms商城网站后台管理模板</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">前端博客</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">博客</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">新码笔记</a></dd>
        <dd><a href="http://www.bootstrapmb.com" target="_blank">DethGhost</a></dd>
        <dd><a href="#">当当</a></dd>
        <dd><a href="#">优酷</a></dd>
        <dd><a href="#">土豆</a></dd>
        <dd><a href="#">新浪</a></dd>
        <dd><a href="#">钉钉</a></dd>
        <dd><a href="#">支付宝</a></dd>
    </dl>
    <div class="wrap btmInfor">
        <p>© 2013 DeathGhost.cn 版权所有 网络文化经营许可证：浙网文[2013]***-027号 增值电信业务经营许可证：浙B2-200***24-1 信息网络传播视听节目许可证：1109***4号</p>
        <address>联系地址：陕西省西安市雁塔区XXX号</address>
    </div>
</footer>
<script type="text/javascript">
    let user = JSON.parse(window.sessionStorage.getItem("user"));
    new Vue({
        el: "#addProductApp",
        data: {
            levelOne: [],
            levelTwo: [],
            levelThree: [],
            levelOneId: -1,
            levelTwoId: -1,
            levelThreeId: -1,
            params: [],
            name: "",
            price: "",
            sendPrice: "",
            description: "",
            specification: "",
            stock: "",
            color: "",
            allStock: 0,
            mainPicture: "../images/icon/goodsDefault.jpeg",
            pictures: [],
            vicePicture: "../images/icon/goodsDefault.jpeg",
            user:{}
        },
        mounted: function () {
            this.initLevelOne();
            this.initStore();
            this.user = JSON.parse(window.sessionStorage.getItem("user"));
        },
        methods: {
            initLevelOne: function () {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/LevelController/getLevels",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        parent: 0
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.levelOne = result.data.levelList;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            initLevelTwo: function () {
                let _this = this;
                this.levelTwoId = -1;
                this.levelThreeId = -1;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/LevelController/getLevels",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        parent: _this.levelOneId
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.levelTwo = result.data.levelList;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            initLevelThree: function () {
                let _this = this;
                this.levelThreeId = -1;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/LevelController/getLevels",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        parent: _this.levelTwoId
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.levelThree = result.data.levelList;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }

                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            addParam: function () {
                if (this.specification === "") {
                    alert("商品规格不能为空");
                } else {
                    if (this.color === "") {
                        alert("商品颜色不能为空");
                    } else {
                        if (this.stock === "") {
                            alert("商品库存不能为空");
                        } else {
                            let p = {};
                            let flag = true;
                            p.specification = this.specification;
                            p.color = this.color;
                            p.stock = this.stock;
                            for (let i = 0; i < this.params.length; i++) {
                                if (this.color === this.params[i].color && this.specification === this.params[i].specification) {
                                    this.allStock = this.allStock - parseInt(this.params[i].stock) + parseInt(p.stock);
                                    Vue.set(this.params, i, p);
                                    flag = false;
                                    break;
                                }
                            }
                            if (flag) {
                                this.allStock += parseInt(p.stock);
                                Vue.set(this.params, this.params.length, p);
                            }
                            this.specification = "";
                            this.color = "";
                            this.stock = "";
                            alert("添加成功");
                        }
                    }
                }
            },
            deletePreImage: function (image) {
                for (let i = 0; i < this.pictures.length; i++) {
                    if (this.pictures[i] === image) {
                        this.pictures.splice(i, 1);
                        alert("删除成功");
                        return;
                    }
                }
                alert("删除失败");
            },
            addPreImage: function () {
                if (this.pictures.length >= 5) {
                    alert("最多添加五张");
                } else {
                    if (this.vicePicture === "../images/icon/goodsDefault.jpeg") {
                        alert("图片不能为空");
                        return;
                    }
                    Vue.set(this.pictures, this.pictures.length, this.vicePicture);
                    this.vicePicture = "../images/icon/goodsDefault.jpeg";
                    alert("添加成功");
                }
            },
            uploadMain: function () {
                let _this = this;
                let file = $("#mainFile")[0].files[0];
                let index = file.name.lastIndexOf(".");
                let type = file.name.substring(index);
                if (type !== ".jpg" && type !== ".png" && type !== ".gif" && type !== ".jpeg" && type !== "bmp" && type !== "webp") {
                    alert("只能上传jpg,png,gif,jpeg,bmp,webp格式的图片！！");
                    return;
                }
                let data = new FormData();
                data.append("file", file);
                data.append("email", user.email);
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/GoodsController/uploadGoodsPicture",
                    type: "post",
                    data: data,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.pictureURL === null) {
                                alert("预览失败");
                            } else {
                                _this.mainPicture = result.data.pictureURL;
                                alert("预览成功");
                            }
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            uploadVice: function () {
                let _this = this;
                let file = $("#viceFile")[0].files[0];
                let index = file.name.lastIndexOf(".");
                let type = file.name.substring(index);
                if (type !== ".jpg" && type !== ".png" && type !== ".gif" && type !== ".jpeg" && type !== "bmp" && type !== "webp") {
                    alert("只能上传jpg,png,gif,jpeg,bmp,webp格式的图片！！");
                    return;
                }
                let data = new FormData();
                data.append("file", file);
                data.append("email", user.email);
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/GoodsController/uploadGoodsPicture",
                    type: "post",
                    data: data,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.pictureURL === null) {
                                alert("预览失败");
                            } else {
                                _this.vicePicture = result.data.pictureURL;
                                alert("预览成功");
                            }
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            addGoods: function () {
                let _this = this;
                let goods = {};
                if (this.levelOneId === -1 || this.levelThreeId === -1 && this.levelTwoId === -1) {
                    alert("商品分类不能为空");
                    return;
                }
                if (this.name === "") {
                    alert("商品名称不能为空");
                    return;
                }
                if (this.price === "") {
                    alert("商品价格不能为空");
                    return;
                }
                if (this.mainPicture === "../images/icon/goodsDefault.jpeg") {
                    alert("商品主图不能为空");
                    return;
                }
                if (this.pictures.length <= 0) {
                    alert("商品图集不能为空");
                    return;
                }
                if (this.sendPrice === "") {
                    alert("运费不能为空");
                    return;
                }
                if (this.description === "") {
                    alert("商品描述不能为空");
                    return;
                }
                if (this.params.length <= 0) {
                    alert("商品参数不能为空");
                    return;
                }
                goods.level = this.levelThreeId;
                goods.name = this.name;
                goods.price = this.price;
                goods.cover = this.mainPicture;
                goods.freight = this.sendPrice;
                goods.description = this.description;
                goods.user = user.id;
                goods.store = JSON.parse(window.sessionStorage.getItem("store")).id;
                goods.stock = this.allStock;
                let dataModel = {};
                dataModel.parameters = this.params;
                dataModel.pictures = this.pictures;
                dataModel.goods = goods;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/GoodsController/addGoods",
                    type: 'post',
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(dataModel),
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                alert("添加商品成功");
                                _this.reset();
                            } else {
                                alert("添加商品失败");
                            }
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            initStore: function () {
                let store = JSON.parse(window.sessionStorage.getItem("store"));
                let _this=this;
                if (store === null) {
                    $.ajax({
                        headers: {
                            token: $.cookie("token")
                        },
                        url: "http://localhost:8080/tshopping/StoreController/getStore",
                        type: 'post',
                        dataType: 'json',
                        data: {
                            user: user.id
                        },
                        success: function (result) {
                            if (result.code === 200) {
                                window.sessionStorage.setItem("store", JSON.stringify(result.data.store));
                            } else {
                                alert("您的账号在另一地点登录,您已被迫下线");
                                _this.logout();
                            }
                        },
                        error: function (result) {
                            console.log(result);
                            alert("世界上最遥远的距离就是没网！");
                        }
                    });
                }
            },
            reset: function () {
                this.name = "";
                this.levelTwoId = -1;
                this.levelThreeId = -1;
                this.levelOneId = -1;
                this.price = "";
                this.mainPicture = "../images/icon/goodsDefault.jpeg";
                this.vicePicture = "../images/icon/goodsDefault.jpeg";
                this.pictures = [];
                this.sendPrice = "";
                this.params = [];
                this.description = "";
                this.allStock = 0;
            },
            logout: function () {
                /**
                 * 注销，清空所有cookie(或者只清空保存着token的Cookie就行)
                 */
                let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                    for (let i = keys.length; i--;)
                        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                }
                //返回登录页面或者主页
                window.location.href = "login.html";
            }
        }
    })
</script>
</body>
</html>
